// @ts-nocheck
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Other from "../views/Other.vue";
import NotFoundComp from "../views/NotFoundComp.vue";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/step1",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ "../views/About.vue"),
    children:[
      {
        path:"/v-props",
        component:()=> import('../components/setp1/props.vue')
      }
    ]
  },
  {
    path: "/step2",
    name: "Other",
    component: Other,
    children: [
      {   
        path: "/v-modal/:id",
        component: () => import("../components/setp2/Vmodal.vue")
      },
      {
        path: "/nexttick",
        component: () => import("../components/setp2/NextTick.vue")
      },
      {
        path: "/slot",
        component: () => import("../components/setp2/Slot.vue")
      },
      {
        path: "/dyn-comp",
        component: () => import("../components/setp2/DynComp.vue")
      },
      {
        path: "/keepalive",
        component: () => import("../components/setp2/KeepAlive.vue")
      },
      {
        path: "/mixin",
        component: () => import("../components/setp2/Mixin.vue")
      }
    ]
  },
  {
    path: "*",
    component: NotFoundComp
  }
];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;
